<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Standard Transitional.html</title>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<!--
<link rel="stylesheet" type="text/css" href="" />
-->
<script type="text/javascript" src="../../scripts/jquery-1.3.2.min.js"></script>
<style type="text/css">
<!--
html {background-color: black; overflow: hidden;}
div {height: 500px; width: 900px; margin-bottom: 50px; line-height: 100px;}
.red {background: red;}
.green {background: green;}
.blue {background: blue;}
div.scrollbar {
    position: fixed; right: 0; bottom: 0;
    width: 200px; height: 200px; margin: 0;
}
div.scrollbar-show {
    background-color: #EEEEEE;
    filter: alpha(opacity=50); opacity: 0.5;
}
-->
</style>
<script type="text/javascript">
<!--
window.setInterval(function() {
	//window.scrollBy(0, 10);
}, 100);

$(function() {
    $("div.scrollbar").mousemove(function(e) {
        var x = this.x - e.clientX;
        var y = this.y - e.clientY;
        var x_ = 0;
        var y_ = 0;
        
        if (0 < x) {
            x_ = 10;
        } else if (0 > x) {
            x_ = -10;
        }
        if (0 < y) {
            y_ = 10;
        } else if (0 > y) {
            y_ = -10;
        }
        window.scrollBy(x_, y_);
        this.x = e.clientX;
        this.y = e.clientY;
    }).hover(function(e) {
        this.x = e.clientX;
        this.y = e.clientY;
        $(this).addClass("scrollbar-show");
    }, function() {
    	$(this).removeClass("scrollbar-show");
    });
});
//-->
</script>
</head>

<body>
    <div class="scrollbar"></div>
    
    <div class="red"></div>
    
</body>
</html>
